<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keyword" content="">
    <meta name="description" content="">
    <title>注册页- 电子网(公司名称)</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/page.css">
</head>

<body>
    <!--container 容器 -->
    <div class="container">
        <div class="header">
            <img src="images/logo.png" alt="电子网(公司名称)" class="fl">
            <div class="header-right fr">
                <!-- menu 菜单 -->
                <p class="menu fr">
                    <a href="">注册</a>
                    &nbsp; &nbsp; &nbsp;
                    <a href="">登录</a>
                </p>
                <div class="clear"></div>
                <!-- 导航 -->
                <ul class="mainbav fr">
                    <li>
                        <a href="" title="关于我们">关于我们</a>
                        <ul class="subnav">
                            <li><a href="" title="CEO 致词">CEO 致词</a></li>
                            <li><a href="" title="公司历史">公司历史</a></li>
                            <li><a href="" title="企业文化">企业文化</a></li>
                            <li><a href="" title="组织结构">组织结构</a></li>
                            <li><a href="" title="合作伙伴">合作伙伴</a></li>
                        </ul>
                    </li>
                    <li><a href="" title="产品展示">产品展示</a></li>
                    <li><a href="" title="新闻中心">新闻中心</a></li>
                    <li><a href="" title="人才招聘">人才招聘</a></li>
                    <li><a href="" title="客户留言">客户留言</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="banner">
            <!-- 横幅 -->
            <img src="images/register_banner.png" alt="">
        </div>

        <div class="main">
            <div class="sidebar fl margin_right">
                <img src="images/gouzi.png" alt="">
                <h3>我的账户</h3>
                <ul>
                    <li><a href="" title="我的详细信息">我的详细信息</a></li>
                    <li><a href="" title="修改详细信息">修改详细信息</a></li>
                    <li><a href="" title="我的留言">我的留言</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="introduction fl">
                <div class="tops">
                    <span class="fl"><img src="images/title-bg-01.png" alt="" class="fl"></span>
                    <span class="pro_s fl">注册</span>
                </div>
                <div class="register_fr">
                    <ul class="fl">
                        <li>首页></li>
                        <li>注册</li>
                    </ul>
                </div>
            </div>
            <div class="register_content fl">
                <div class="regis_img">
                    <img src="images/register_sv.png" alt="">
                    <div class="clear"></div>
                    <p>Member Register</p>
                    <div class="register_sub fl">
                        <form action="" method="" id="register">
                            <ul style="width: 480px; margin: 0 auto;">
                                <li> 
                                    <label>用户名</label>
                                    <input type="text" name="user">
                                </li>
                                <li><label>密码</label>
                                    <input type="password" name="pwd"></li>
                                <li><label>确认密码</label>
                                    <input type="password" name="pwd2"></li>
                                <li><label>电子邮箱</label>
                                    <input type="email" name="email" id="email">
                                    <span id="ts1" class="tye"></span>
                                </li>
                                <li><label>手机号码</label>
                                    <input type="text" name="phone" id="phone">
                                    <input type="button" value="获取验证码" style="position: absolute;top: 8px;right: 15px;" id="getcode">
                                </li>
                                <li><label>验证码</label>
                                    <input type="text" name="code" id="code">
                                </li>
                                <li> <label>性别</label>
                                    <div class="sext">
                                        <input type="radio" name="sex" id="sex">男
                                        <input type="radio" name="sex" id="sex">女
                                    </div>
                                </li>
                                <li>
                                    <label class="ger">个人介绍</label>
                                    <textarea name="content" id="" cols="30" rows="10"></textarea>
                                    <div><em>0</em>/10</div>
                                </li>
                                <li>
                                    <input type="submit" value="注册">
                                    <input type="reset" value="重置"></li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
   

    <div class="footer">
        <!-- 网页底部 -->
        <div class="footer-left">
            地址：广东省广州市海珠区新港西路231号3栋4层 联系人：乐 乐 移动电话：13588888888 固定电话：020-1234567 传 真：020-1234567
            Copyright @ 2014 文豆网络科技有限公司 版权所有 粤ICP备0000000号
        </div>
        <div class="select">
            <select name="" id="">
                <option value="">友情链接</option>
                <option value="">腾讯网</option>
                <option value="">淘宝网</option>
            </select>
        </div>
    </div>
    </div>

    <script src="js/jquery-min-3.4.1.js"></script>
    <script>
     document.getElementById("email").onblur = function(){
         var st1=document.getElementById("ts1");
         if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.value)){
          ts1.innerHTML = "请正确填写邮箱";
          ts1.style.color = "red";
         }else{
             ts1.innerHTML ='';
         }
     }

     // 鼠标失去焦点事件
     // $('#email').blur(function(){

     // });

     // 验证码按钮，添加“点击”事件
     var getcode = document.getElementById('getcode');  // 发送按钮（对象）
     var t;
     getcode.onclick = function(){
        //（1）验证手机号码（格式）
        var phone = document.getElementById('phone');
        // 正则表达式（手机号）
        if(!/^1[3456789]\d{9}$/.test(phone.value)){
            alert('请正确输入手机号码');
            return;     // 函数，返回操作（后面的程序不会运行）
        }
        //（2）发送验证倒计时，添加定时器
        clearInterval(t);
        t = setInterval(show,1000);
        
     }

     var i = 59;
     function show(){
        //定时程序
        if(i==0){
            getcode.value = '发送验证码';
            getcode.disabled = false;   /*不禁用*/
            clearInterval(t);
            i = 59;
        }else{
            getcode.value = i+'秒再发送';
            getcode.disabled = true;    /*禁用*/  
            i--;
        }
    }

    // 给表单添加提交事件
    $('#register').submit(function(){   // 事件结构
        // 做验证
        var $user = $('input[name="user"]');         // 用户名
        var $pwd = $('input[name="pwd"]');         // 密码
        var $pwd2 = $('input[name="pwd2"]');         // 确认密码
        var $email = $('input[name="email"]');         // 邮箱
        var $code = $('input[name="code"]');         // 验证码
        var $sex = $('input[name="sex"]');         // 性别(2个单选按钮)
        var $content = $('textarea[name="content"]'); // 个人介绍（对象）

        if($user.val().length==0){
            // $user.parent()  // 用户名输入框的父标签 li
            // $user.parent().children('span')  li的子标签 span(一开始没有，追加一次就有了)
            // .remove() 删除标签
            // .append() 追加内容（内容可以写个span标签）
            $user.parent().children('span').remove();
            $user.parent().append('<span>请输入用户名</span>');
            $user.focus();      // 输入框得到焦点（获得光标）    blur 失去焦点
            return false;   // 阻止表单提交跳转
        }else{
            $user.parent().children('span').remove();
        }

        if($pwd.val().length==0){
            $pwd.parent().children('span').remove();
            $pwd.parent().append('<span>请输入密码</span>');
            $pwd.focus();
            return false;
        }else{
            $pwd.parent().children('span').remove();
        }

        if($pwd2.val()!=$pwd.val()){
            $pwd2.parent().children('span').remove();
            $pwd2.parent().append('<span>密码不一致</span>');
            $pwd2.focus();
            return false;
        }else{
            $pwd2.parent().children('span').remove();
        }

        // 正则对象.test()  匹配邮箱格式
        if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($email.val())){
            $email.parent().children('span').remove();
            $email.parent().append('<span>请正确填写邮箱</span>');
            $email.focus();
            return false;
        }else{
            $email.parent().children('span').remove();
        }

        // innerHTML   js获取开始标签+结束标签的内容
        // .html()  jq获取开始标签+结束标签的内容
        // $code.val()      .val()  获取属性值 <input type="text" name="code" id="code">
        
        if($code.val().length==0){
            $code.parent().children('span').remove();
            $code.parent().append('<span>请输入验证码</span>');
            $code.focus();
            return false;
        }else{
            // 写ajax异步操作（以后再做，这个功能，涉及后端的程序）
            $code.parent().children('span').remove();
        }

        // $('input[name="sex"]:checked')  获取被选中的“性别”单选按钮(jq对象，几乎都是数组，数组就有这个length属性)
        // alert($('input[name="sex"]:checked').length);
        if($('input[name="sex"]:checked').length==0){
            $sex.parent().children('span').remove();
            $sex.parent().append('<span>请选择性别</span>');
            $sex.focus();
            return false;
        }else{
            $sex.parent().children('span').remove();
        }

        if($content.val().length==0){
            $content.parent().children('span').remove();
            $content.parent().append('<span>请输入个人介绍</span>');
            $content.focus();
            return false;
        }else{
            // 写ajax异步操作（以后再做，这个功能，涉及后端的程序）
            $content.parent().children('span').remove();
        }
    });


    // 统计“个人介绍”文本框的字数
    $('textarea[name="content"]').keyup(function(){
        // $(this) 这个文本框
        var l = $(this).val().length;
        if(l>10){
            // 内容长度已经超过10个字，怎么办？
            // 字符串截取
            var str = $(this).val().substr(0,10);     // 得到10个字符
            $(this).val(str);   // 更改文本框里面的内容
            l=10;
        }
        $(this).next().children('em').html(l);
    });

    </script>
</body>

</html>